<template>
  <ProConfigProvider :theme="btnTheme">
    <Button v-bind="{ ...$attrs, ...props }" :type="buttonType" :shape="buttonShape" :class="sizes">
      <template v-for="(_, key) in $slots" #[key]>
        <span :style="textColor()">
          <slot :name="key"></slot>
        </span>
      </template>
    </Button>
  </ProConfigProvider>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { Button } from 'ant-design-vue';
  import { buttonProps, buttonColorPrimary, aButtonTypes } from './button';
  import type { ButtonType, AButtonType } from './button';

  defineOptions({
    name: 'AButton',
  });

  const props = defineProps({
    ...buttonProps(),
    type: {
      type: String as PropType<ButtonType>,
    },
    // 自定义按钮颜色
    color: String,
    buttonShape: String,
    textColor: {
      type: String,
      default: '',
    },
    sizes: {
      type: String,
      default: '',
    },
  });

  const isCustomType = computed(() => Reflect.has(buttonColorPrimary, props.type!));

  const buttonShape = computed(() => {
    return props.shape;
  });

  const textColor = () => {
    return `color : ${props.textColor}`;
  };

  const buttonType = computed<AButtonType>(() => {
    if (props.type && aButtonTypes.includes(props.type)) {
      return props.type as AButtonType;
    } else if (props.color || isCustomType.value) {
      return 'primary';
    }
    return 'default';
  });

  const btnTheme = computed(() => {
    const type = props.type!;
    if (props.color || isCustomType.value) {
      return {
        token: {
          colorPrimary: props.color || buttonColorPrimary[type],
        },
      };
    }
    return undefined;
  });
</script>
<style lang="less" scoped>
  .large.ant-btn {
    height: 40px;
    font-size: 16px;
    padding: 9px 16px;
    line-height: normal;
  }
  //修改按钮尺寸
  :deep(.ant-btn) {
    padding: 6px 16px;
  }
  .small.ant-btn {
    height: 28px;
    font-size: 14px;
    padding: 4px 12px;
    line-height: 0.5;
  }
  .smalls.ant-btn {
    height: 24px;
    font-size: 12px;
    padding: 4px 8px;
    line-height: 0.5;
  }
</style>
